<template>
  <div class="shopcar">
    <ul>
      <li v-for="item in shopcar" :key="item.spuId">
        <input type="checkbox" v-model="item.status" @change="checkItem" />
        <!-- 原生的input框要用change事件 -->
        <img :src="item.images" alt="" />
        <div>
          <h4>{{ item.spuTitle }}</h4>
          <h5>{{ item.price }}</h5>
        </div>
        <el-input-number
          v-model="item.store_nums"
          :min="1"
          :max="10"
          label="描述文字"
        ></el-input-number>
        <el-button type="primary">删除</el-button>
      </li>
    </ul>
    全选 <input type="checkbox" v-model="checked" @change="checkall" />
    总价:{{}}
    <el-button @click="removeall">批量删除</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
    };
  },
  methods: {
    checkItem() {
      console.log(111);
      this.checked = this.$store.state.shopcar.every((i) => i.status == true);
      //   也能写成
      //   let res = this.$store.state.shopcar.filter((i) => {
      //     return i.status == false;
      //   });
      //   if (res.length > 0) {
      //     this.checked = false;
      //   } else {
      //     this.checked = true;
      //   }
    },
    //上面的复选框控制下面的复选框 every 方法返回布尔值 如果都满足条件就返回true  只要有一个不满足就返回false
    checkall() {
      this.$store.commit("checkall", this.checked);
    },
    //点击全选传到vuex修改vuex里的数据的状态
    removeall() {
      this.$store.commit("removeall");
    },
  },
  created() {},
  mounted() {},
  components: {},
  computed: {
    shopcar() {
      return this.$store.state.shopcar;
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.shopcar {
  width: 800px;
  margin: 50px auto;
  li {
    display: flex;
    img {
      width: 100px;
      height: 100px;
    }
  }
}
</style>
